<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="(response, file, fileList)=> fileUpload(response, file, fileList)"
      multiple
      :limit="3"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <vue-office-docx
      v-if="isdocx"
      :src="url"
      @rendered="rendered"
      style="width: 100%; height: 100%"
    />
    <vue-office-excel
      v-if="isexcel"
      :src="url"
      @rendered="rendered"
      style="width: 100%; height: 100%"
    />
    <vue-office-pdf
      v-if="ispdf"
      :src="url"
      @rendered="rendered"
      style="width: 100%; height: 100%"
    />
  </div>
</template>
<script>

//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
  },
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "http://192.168.1.15:8088/filecloud/202404/29/56000ae2-6e0b-4669-837b-11b447ee915f.xls",
        },
        {
          name: "food2.jpeg",
          url: "http://192.168.1.15:8088/filecloud/202404/29/bcc9421e-1123-4e74-b427-23d6bd131b9b.pdf",
        },
      ],
      url: "",
      isdocx: false,
      isexcel: false,
      ispdf:false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList,"!@");
    },
    handlePreview(file) {
      console.log(file,"!21");
      window.open(file.url);//execl的文件直接window.open(地址)就可以下载，不需要写下载的方法。
    },
    // 怎么做才能让xls格式打开查看预览而不是下载
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    fileUpload(response, file, fileList,){
      console.log(response.url,"url");
    },
  },
};
</script>